<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div>
        <li>DOM是哪种基本的数据结构：树</li>
        <li>DOM操作的常用API有哪些：
            <ol>获取dom节点，以及节点的property和Attribute</ol>
            <ol>获取父节点，获取子节点</ol>
            <ol>新增节点，删除节点</ol>
        </li>
        <li>DOM节点的attr和property<br>
            <ol>property只是一个js对象的属性修改</ol>
            <ol>Attribute是对html标签属性的修改</ol>
        </li>
        <li>如何检测浏览器的类型（navigator和screen）</li>
        <li>拆解url的各部分（location、history）</li>

    </div>
    <script>
        //dom节点操作
            //获取dom节点
            //prototype
            //Attribute
            var div1 = document.getElementById('div1');//元素
            var divList = document.getElementsByTagName('div');//集合
            console.log(divList.length)
            console.log(divList[0])
            var containerList = document.getElementsByClassName('.container');//集合
            var pList = document.querySelectorAll('p');//集合
            var p = pList[0];
            console.log(p.style.width);//获取样式
            p.style.width = '100px';//修改样式
            console.log(p.className);//获取class
            p.className = 'p1';//修改class

            //获取nodeName 和 nodeType
            console.log(p.nodeName);
            console.log(p.nodeType);

            //检测浏览器
            var ua = navigator.userAgent
            var isChrome = ua.indexOf('Chrome')
            console.log(isChrome);

            
    </script>
</body>
</html>